// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意点：Vue3没有全局过滤器。
// import XtxSkeleton from './xtx-skeleton'
// import XtxCarousel from './xtx-carousel'
// import XtxMore from './xtx-more.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
// import XtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'
import Message from '@/components/library/Message'
import Confirm from './Confirm'

// Vue2 全局注册组件
// Vue.component('组件名', 组件)
// require.context 是否加载目录
// keys（）读取到这个文件下所有的文件列表
const importFn = require.context('/', false, /\.vue$/)
// console.log(importFn.keys())
// Vue3 全局注册组件
// app.component('组件名', 组件)
// 封装指令放到这个函数里面
const defineDirective = (app) => {
  // 自定义指令
  app.directive('src', {
    // 挂载dom后接收一个自定义指令和数据value
    mounted (target, { value }) {
      // console.log(target)
      // 这个是懒加载里面的东西
      const { stop } = useIntersectionObserver(
        target,
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // console.log(1111111111111111111)
            target.src = value
            target.onerror = () => {
              target.src = defaultImg
            }
            stop()
          }
        },
        // 这个是滑动到就要显示多小就开始加载
        { thershold: [0.003] }
      )
    }

  })
}

export default {
  // install 这种写法以后是提供给 app.use() 安装组件库用的
  install (app) {
    // Vue3 全局注册组件
    // app.component('XtxSkeleton', XtxSkeleton)
    // app.component('XtxCarousel', XtxCarousel)
    // app.component('XtxMore', XtxMore)
    // app.component('XtxBread', XtxBread)
    // app.component('XtxBreadItem', XtxBreadItem)
    // 全局注册
    // 遍历文件名数组
    importFn.keys().forEach(item => {
      // 导入函数根据文件名，导入文件内容
      const component = importFn(item).default
      // 拿到的是每个组件或者文件
      // console.log(component)
      // 根据导入的组件文件，实现全局注册
      app.component(component.name, component)
    })
    // 图片懒加载
    // 注册指令
    defineDirective(app)
    // 添加全局方法
    app.config.globalProperties.$message = Message// 原型函数
    app.config.globalProperties.$confirm = Confirm
  }
}
